<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<head>
    <%- include('../component/head') %>
</head>
<body>
<div id="fh5co-page">

    <!-- 左边菜单 -->
    <%- include('../component/admin/left_menu') %>


    <div id="fh5co-main">

        <%- include('../component/admin/banner') %>

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                        <h6 class="mb-0 align-self-center" style="color: white;">发表博客</h6>
                    </div>
                    <div class="card-body" id="formBlog">

                        <vxe-form
                                title-colon
                                ref="xForm"
                                title-align="right"
                                title-width="100"
                                :data="formData2"
                                :rules="formRules2"
                                :loading="loading2"
                                @submit="submitEvent2"
                                @reset="resetEvent">

                            <vxe-form-item title="标题" field="title" span="12" align="center">
                                <template #default="{ data }">
                                    <vxe-input v-model="data.title" placeholder="请输入标题" clearable></vxe-input>
                                </template>
                            </vxe-form-item>

                            <vxe-form-item title="选择标签" field="la_id" span="12" align="center" title-overflow>
                                <template #default="{ data }">
                                    <vxe-select v-model="data.la_id" placeholder="选择标签" clearable>

                                        <% if(labels){ %>
                                            <% labels.forEach( item => { %>
                                                <vxe-option value="<%= item.id %>"
                                                            label="<%= item.la_name %>"></vxe-option>
                                            <% }) %>
                                        <% } %>
                                    </vxe-select>
                                </template>
                            </vxe-form-item>

                            <vxe-form-item title="是否推荐" field="hot" span="12" align="center" title-overflow>
                                <template #default="{ data }">
                                    <vxe-select v-model="data.hot" placeholder="是否推荐" clearable>
                                        <vxe-option value="1" label="推荐"></vxe-option>
                                        <vxe-option value="0" label="不推荐"></vxe-option>
                                    </vxe-select>
                                </template>
                            </vxe-form-item>

                            <vxe-form-item title="文章图片" span="12" field="thumbnail">
                                <template #default="{ data }">
                                    <img v-if="data.thumbnail" :src="data.thumbnail" @click="upImg(data)"
                                         style="width: 100px;margin: 5px">
                                    <div v-else>
                                        <vxe-button @click="upImg(data)" icon="fa fa-download"
                                                    style="margin-bottom: 5px">上传图片
                                        </vxe-button>
                                    </div>
                                    <p>已选文件：{{ fileImg.name }}</p>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-info" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             :style="{ width: progressText }">
                                        </div>
                                    </div>

                                </template>
                            </vxe-form-item>

                            <vxe-form-item span="24">

                                <div id="layout">
                                    <div id="test-editormd">
                                        <textarea style="display:none;"></textarea>
                                    </div>
                                </div>

                            </vxe-form-item>

                            <vxe-form-item align="center" span="24" :item-render="{}">
                                <template #default>
                                    <vxe-button type="submit" status="primary">提交</vxe-button>
                                    <vxe-button type="reset">重置</vxe-button>
                                </template>
                            </vxe-form-item>

                        </vxe-form>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<%- include('../component/admin/foot') %>


<script type="text/javascript">
    var thisEditor;
    $(function () {
        thisEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "/editor.md/lib/"
        });
    });
</script>

<script>
    const $VXE = VXETable.modal;
    const $XSaveFile = VXETable.saveFile;
    const $XReadFile = VXETable.readFile;
    new Vue({
        el: '#formBlog',
        data: {
            Articles: '',
            fileImg: '',
            progressText: '0',
            loading2: false,
            formData2: {
                id: null,
                title: null,
                hot: null,
                thumbnail: null,
                la_id: null,
                content: null
            },
            formRules2: {
                title: [
                    {required: true, message: '请输入名称'},
                    {min: 3, max: 20, message: '长度在 3 到 20 个字符'}
                ],
                hot: [
                    {required: true, message: '选择是否是推荐'}
                ],
                la_id: [
                    {required: true, message: '选择标签'}
                ]
            }
        },
        methods: {
            upImg() {
                $XReadFile().then(params => {
                    const {files} = params;
                    Array.from(files).map(file => {
                        this.fileImg = file;
                    })
                })
            },
            upData(row, url) {
                const than = this;
                let file = this.fileImg;
                let progress = new XEAjax.Progress()
                progress.onUploadProgress = evnt => {
                    let value = progress.value
                    than.progressText = `${value}%`
                    if (value === 100) {
                        setTimeout(() => {
                            than.progressText = '0%';
                            than.fileImg = {name: ''};
                            this.loading2 = false;
                        }, 500);
                    }
                }

                let formBody = new FormData()
                formBody.append('photo', file);
                formBody.append('eBlog', thisEditor.getMarkdown());
                formBody.append('row', JSON.stringify(row));
                XEAjax.fetchPost(url, formBody, {progress}).then(res => {
                    $VXE.message({message: '文章已发布!', status: 'success'});
                    setTimeout(() => {
                        location.href = '/admin/blog.mgt'
                    }, 500);
                }).catch(err => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), status: 'error'});
                });
            },
            submitEvent2() {
                this.loading2 = true
                if (this.Articles) {
                    this.upData(this.formData2, '/blog/upArticle');
                } else {
                    this.upData(this.formData2, '/blog/saveArticle');
                }

            },
            saveArticle() {
                XEAjax.post('/blog/getEditBlog', {eBlog: thisEditor.getMarkdown()}).then(res => {
                    VXETable.modal.message({content: '已保存当前编辑', status: 'info'});
                }).catch(err => {
                });
            },
            resetEvent() {
                VXETable.modal.message({message: '重置事件', status: 'info'})
            }
        },
        created() {
            mainFun();


        },
        mounted() {
            this.$nextTick(() => {
                let Articles = <%- JSON.stringify(typeof (Articles) !== 'undefined' ? Articles : '') %>;
                if (Articles) {
                    this.Articles = Articles[0];
                    this.formData2 = Articles[0];
                    console.log('---------------->>>加载文章', JSON.stringify(Articles[0]));
                    XEAjax.doGet(Articles[0].content).then(markdown => {
                        const {data} = markdown;
                        thisEditor = editormd("test-editormd", {
                            width: "90%",
                            height: 640,
                            syncScrolling: "single",
                            appendMarkdown: data,
                            path: "/editor.md/lib/"
                        })
                    });
                }
            })
        }
    })

</script>


</body>
</html>
